<template>
  <div>
    <el-button type="primary" style="margin-bottom: 10px" @click="addRow">新增分类</el-button>
    <!--新增分类弹出框-->
    <el-dialog v-model="dialogVisible" :title="id ? '修改分类' : '新增分类'" :before-close="handleBeforeClose">
      <CategoryEdit ref="categoryForm" :id="id" @success="editSuccess" />
    </el-dialog> 
    <!--分类管理-->
    <el-table ref="tableRef" :data="tableData" style="margin-bottom: 20px" row-key="id" border default-expand-all>
      <el-table-column prop="name" label="分类名称" sortable />
      <el-table-column label="分类级别">
        <template #default="{ row }">
          <span v-if="row.pid == 0">一级分类</span>
          <span v-else>二级分类</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="分类编号" />
      <el-table-column label="分类图片">
        <template #default="{ row }">
          <el-image v-if="row.picture != ''" :src="row.picture" fit="contain" 
            style="display: flex; align-items: center; height: 60px" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button type="warning" @click="editRow(row)">编辑</el-button>
          <el-button type="danger" @click="delRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCategoryList, delCategory } from '../../api';
import { ElMessageBox, ElMessage } from 'element-plus'
import CategoryEdit from '../../components/CategoryEdit.vue';

const tableData = ref([])
const dialogVisible = ref(false)
const id = ref(0)
const categoryForm = ref()

onMounted(() => {
  loadCategoryList()
})

const loadCategoryList = async () => {
  let data = await getCategoryList()
  tableData.value = convertToTree(data)
  console.log(tableData)
}

// 一维数组转换成树形结构
const convertToTree = data => {
  const treeData = []
  const map = []
  // 遍历一维数组，建立节点映射
  for (const item of data) {
    map[item.id] = {...item, children: []}
  }
  // 遍历映射表，添加节点
  for (const item of data) {
    const node = map[item.id]
    if (item.pid === 0) {
      treeData.push(node)
    } else {
      const parent = map[item.pid]
      parent.children.push(node)
    }
  }
  return treeData
}

// 新增分类
const addRow = () => {
  if (categoryForm.value) {
    categoryForm.value.resetForm(0)
  }
  id.value = 0
  dialogVisible.value = true
}

// 编辑分类
const editRow = row => {
  if (categoryForm.value) {
    categoryForm.value.resetForm(row.id)
  }
  id.value = row.id
  dialogVisible.value = true
}

// 关闭弹窗前
const handleBeforeClose = () => {
  ElMessageBox.confirm('确定关闭对话框吗？', {
    showClose: false,
    closeOnClickModal: false,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    dialogVisible.value = false
  }).catch(() => {})
}

// 删除分类
const delRow = row => {
  if (row.pid == 0 && row.children.length != 0) {
    ElMessage({
      type: 'warning',
      message: '该分类下存在二级分类，请先删除二级分类再删除此分类'
    })
  } else {
    ElMessageBox.confirm('确定要删除此分类吗？', {
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(async () => {
      if (await delCategory({id: row.id})) {
        loadCategoryList()
      }
    }).catch(() => {})
  }
}

const editSuccess = () => {
  loadCategoryList()
  dialogVisible.value = false
}
</script>